<template>
  <div class="dashboard-editor-container">
    <!--    柱状图选项    -->
    <h2>中心站指标展示图(月)</h2>
    <h4>本图可选择并展示某一指标，在多个中心站中某个月份的数据</h4>
    <el-form :model="queryParamsMonth" ref="queryMonthForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParamsMonth.dataYear"
          placeholder="请选择年份(单选)"
          clearable
          @change="currentYearFirst"
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataYear"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParamsMonth.indeId"
          placeholder="请选择指标名称(单选)"
          :disabled="firstChangeEnable"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeOptionsFirst"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="归属组织" prop="orgId">
        <el-select
          v-model="queryParamsMonth.orgId"
          multiple
          :disabled="firstChangeEnable"
          placeholder="请选择归属组织(多选)"
          @keyup.enter.native="handleQuery"
          @change="selectChange"
          style="width: 240px"
        >
          <el-checkbox
            v-model="checked"
            :indeterminate="indeterminate"
            @change="selectAllMonth"
            class="select-checkbox"
          >全选</el-checkbox>
          <el-option
            v-for="item in orgOptions"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="月份选择" prop="dataDimension">
        <el-select
          v-model="queryParamsMonth.dataDimension"
          :disabled="firstChangeEnable"
          placeholder="请选择月份(单选)"
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.dataYear"
            :label="item.dataDimension"
            :value="item.dataDimension"
          >
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryMonth" :disabled="firstChangeEnable">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryMonth">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ycbarmonth_zhan :ycMonthQueryResult="ycMonthQueryResult" ref="ycbarmonth_zhan"/>
    </el-row>


    <!--    柱状图选项    -->
    <h2>数据可视化-柱状图(季)</h2>
    <h4>本图可选择并展示属于多个组织的某一指标，在某年多个月份中的数据</h4>
    <h4>本图可选择并展示属于站级指标数据中，某一指标，在某年中某个季度（第一季度为1、2、3月，第二季度为4、5、6月，第三季度为7、8、9月，第四季度为10、11、12月）的数据</h4>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParams.dataYear"
          placeholder="请选择年份(单选)"
          @change="currentYearSecond"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataYear"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParams.indeId"
          placeholder="请选择指标名称(单选)"
          :disabled="secondChangeEnable"
          clearable
          filterable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeOptionsSecond"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="归属组织" prop="orgId">
        <el-select
          v-model="queryParams.orgId"
          :disabled="secondChangeEnable"
          multiple
          placeholder="请选择归属组织(多选)"
          @keyup.enter.native="handleQuery"
          @change="selectChange"
          style="width: 240px"
        >
          <el-checkbox
            v-model="checked"
            :indeterminate="indeterminate"
            @change="selectAll"
            class="select-checkbox"
          >全选</el-checkbox>
          <el-option
            v-for="item in orgOptions"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="季度选择" prop="dataDimension">
        <el-select
          v-model="queryParams.dataDimension"
          :disabled="secondChangeEnable"
          placeholder="请选择季度(单选)"
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in quarterOptions"
            :key="item.label"
            :label="item.label"
            :value="item.dataDimension"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" :disabled="secondChangeEnable">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ycbarquarter_zhan :ycBarQueryResult="ycBarQueryResult" ref="ycbarquarter_zhan"/>
    </el-row>

  </div>
</template>

<script>
import { listInde, getInde, delInde, addInde, updateInde } from "@/api/system/inde";
import { ycindeSelect,ycindeSelectByYear,ycindeSelectZhan } from "@/api/system/inde";
import {ycdatamonthSelect, ycdatayearSelect} from "@/api/system/data"
import {ycorgSelect} from "@/api/system/org";
import PanelGroup from './dashboard/PanelGroup'
import ycbarmonth_zhan from "./dashboard/ycbar/ycbarmonth_zhan";
import ycbarquarter_zhan from "./dashboard/ycbar/ycbarquarter_zhan";


export default {
  name: 'Index',
  components: {
    PanelGroup,
    ycbarmonth_zhan,
    ycbarquarter_zhan

  },
  data() {
    return {

      firstChangeEnable:true,
      secondChangeEnable:true,
      ycBarQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
      },

      ycLineQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
      },

      ycLineRankingQueryResult: {
        indeId:null,
        dataYear:null,
        dataDimension:null,
      },

      ycMonthQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
        dataDimension:null
      },
      ycPieQueryResult: {
        indeId:null,
        dataYear:null,
      },
      checked: false,
      indeterminate: false,

      //部门
      orgOptions:[],
      indeOptions:[],
      indeYearOptions:[],
      indeOptionsFirst:[],
      indeOptionsSecond:[],
      monthOptions:[],
      quarterOptions:[
        {
          dataDimension:[1,2,3],
          label:'第一季度'
        },
        {
          dataDimension:[4,5,6],
          label:'第二季度'
        },
        {
          dataDimension:[7,8,9],
          label:'第三季度'
        },
        {
          dataDimension:[10,11,12],
          label:'第四季度'
        },
      ],
      yearOptions:[],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      queryParamsMonth: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsLine: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsLineRanking: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsPie: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 表单参数
      form: {
      },
    }
  },
  created() {
    this.getList();
    this.getOrgSelect();
    this.getIndeSelect();
    this.getDataYear();
    this.getDataMonth();
  },
  methods: {
    currentYearFirst(valFirst){
      var paramFirst = 1;
      this.firstChangeEnable = true;
      this.getIndeSelect(valFirst, paramFirst);
    },
    currentYearSecond(valSecond){
      var paramSecond = 2;
      this.secondChangeEnable = true;
      this.getIndeSelect(valSecond, paramSecond);
    },
    selectAll() {
      this.indeterminate = false;
      let selectedData = [];
      // 若勾选了全选，则选上所有数据
      if (this.checked) {
        this.orgOptions.forEach((item) => {
          selectedData.push(item.orgId);
          // console.log(selectedData)
        });
      }
      this.queryParams.orgId = selectedData;
      this.queryParamsMonth.orgId = selectedData;
    },
    selectAllMonth() {
      this.indeterminate = false;
      let selectedData = [];
      // 若勾选了全选，则选上所有数据
      if (this.checked) {
        this.orgOptions.forEach((item) => {
          selectedData.push(item.orgId);
          // console.log(selectedData)
        });
      }
      this.queryParamsMonth.orgId = selectedData;
    },
    // select下拉框选中数据变化
    selectChange(val) {
      // 全选
      if (val.length === this.orgOptions.length) {
        this.checked = true;
        this.indeterminate = false;
      } else if (val.length < this.orgOptions.length && val.length > 0) {
        // 部分选择
        this.checked = false;
        this.indeterminate = true;
      } else {
        // 未选择
        this.checked = false;
        this.indeterminate = false;
      }
    },

    getOrgSelect(){
      ycorgSelect().then(response =>{
        let MapList = response.data;
        this.orgOptions = MapList.filter(item=>item.orgId >= 106 && item.orgId <= 121)
      })
    },
    getIndeSelect(currentYear, param){
      ycindeSelectZhan().then(response =>{
        response.data
        this.indeOptionsFirst =[];
        this.indeOptionsSecond =[];
        var tem_indeOptions = response.data;
        for (let i in tem_indeOptions){
          if(currentYear == tem_indeOptions[i].indeYear){
            switch(param){
              case 1:
                this.firstChangeEnable = false;
                this.indeOptionsFirst.push(tem_indeOptions[i]);
                break;
              case 2:
                this.secondChangeEnable = false;
                this.indeOptionsSecond.push(tem_indeOptions[i]);
                break;
            };
          }
          else continue;
        }

      })
    },
    getDataYear(){
      ycdatayearSelect().then(response =>{
        this.yearOptions = response.data;
      })
    },
    getDataMonth(){
      ycdatamonthSelect().then(response =>{
        this.monthOptions = response.data;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let indeId = this.queryParams.indeId;
      let orgId = this.queryParams.orgId;
      let dataYear = this.queryParams.dataYear;
      let dataDimension = this.queryParams.dataDimension;
      this.ycBarQueryResult.orgId = orgId;
      this.ycBarQueryResult.indeId = indeId;
      this.ycBarQueryResult.dataYear = dataYear;
      this.ycBarQueryResult.dataDimension = dataDimension;
      // console.log("在index_v1的ycBarQueryResult" )
      // console.log(this.ycBarQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryLine() {
      let indeId = this.queryParamsLine.indeId;
      let orgId = this.queryParamsLine.orgId;
      let dataYear = this.queryParamsLine.dataYear;
      let dataDimension = this.queryParamsLine.dataDimension;
      this.ycLineQueryResult.orgId = orgId;
      this.ycLineQueryResult.indeId = indeId;
      this.ycLineQueryResult.dataYear = dataYear;
      this.ycLineQueryResult.dataDimension = dataDimension;
      // console.log("在index_v1的ycLineQueryResult" )
      // console.log(this.ycLineQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryLineRanking() {
      let indeId = this.queryParamsLineRanking.indeId;
      let dataYear = this.queryParamsLineRanking.dataYear;
      let dataDimension = this.queryParamsLineRanking.dataDimension;
      this.ycLineRankingQueryResult.indeId = indeId;
      this.ycLineRankingQueryResult.dataYear = dataYear;
      this.ycLineRankingQueryResult.dataDimension = dataDimension;
      console.log("------------------------------在index_v1的ycLineRankingQueryResult" )
      console.log(this.ycLineRankingQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryMonth() {
      let indeId = this.queryParamsMonth.indeId;
      let orgId = this.queryParamsMonth.orgId;
      let dataYear = this.queryParamsMonth.dataYear;
      let dataDimension = [this.queryParamsMonth.dataDimension];
      this.ycMonthQueryResult.orgId = orgId;
      this.ycMonthQueryResult.indeId = indeId;
      this.ycMonthQueryResult.dataYear = dataYear;
      this.ycMonthQueryResult.dataDimension = dataDimension;
      // console.log("在index_v1的ycMonthQueryResult" )
      // console.log(this.ycMonthQueryResult)
    },

    /** 饼状图搜索按钮操作 */
    handleQueryPie() {
      let indeId = this.queryParamsPie.indeId;
      let dataYear = this.queryParamsPie.dataYear;
      this.ycPieQueryResult.indeId = indeId;
      this.ycPieQueryResult.dataYear = dataYear;
      // console.log("在index_v1的ycPieQueryResult" )
      // console.log(this.ycPieQueryResult)
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.$refs.ycbarquarter_zhan.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryLine() {
      this.resetForm("queryLineForm");
      this.queryParamsLine.pageNum = 1;
      this.$refs.ycline.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryLineRanking() {
      this.resetForm("queryLineRankingForm");
      this.queryParamsLineRanking.pageNum = 1;
      this.$refs.yclineranking.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryMonth() {
      this.resetForm("queryMonthForm");
      this.queryParamsMonth.pageNum = 1;
      this.$refs.ycbarmonth_zhan.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryPie() {
      this.resetForm("queryPieForm");
      this.queryParamsPie.pageNum = 1;
      this.$refs.ycpieparams.emptyChart();
    },

    /** 查询部门管理列表 */
    getList() {
      this.loading = true;
      listInde(this.queryParams).then(response => {
        this.indeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
  .select-checkbox {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 6px 20px;
    border-bottom: 1px solid #eee;
  }
.dashboard-editor-container {
  padding: 10px 32px 32px 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
